<script setup>
import { reactive } from 'vue';
const obj = reactive({
  srcType: 'img',
  placeholderType: 'icon',
  src: 'https://cdn.quasar.dev/img/avatar5.jpg',
  icon: 'home',
  text: '鸿章',
  icon2: 'directions',
  size: '200px'
})
const emitSize = val => {
  obj.size = val
}
</script>
<template>
  <!--
  本组件的讨论公共前提：slot + 属性 ，只能留一个
  排名分先后，按优先级排名：
  img 要用插槽（大小会铺满）
  icon -> 插槽/传参的效果都符合预期
  string -> 要用插槽（位置居中）-->
  <ul>
    <li @click="obj.size = obj.size === '100px' ? '300px' : '100px'">
      size {{ obj.size }}
    </li>
    <li>
      <t-button @click="obj.srcType = obj.srcType === 'icon' ? 'img' : 'icon'">当前src type: {{ obj.srcType }}</t-button>
    </li>
    <li>
      <t-button @click="obj.src = obj.src ? '' : 'https://cdn.quasar.dev/img/avatar5.jpg'">当前 src: {{ obj.src
      }}</t-button>
    </li>
    <li>
      <t-button @click="obj.icon = obj.icon ? '' : 'home'">当前 icon: {{ obj.icon }}</t-button>
    </li>
    <li>
      <t-button @click="obj.placeholderType = obj.placeholderType === 'icon' ? 'text' : 'icon'">当前placeholder type: {{
        obj.placeholderType }}
        (icon: {{ obj.icon2 }})(text: {{ obj.text }})
      </t-button>
    </li>
  </ul>

  <t-avatar :size="obj.size" font-size="52px" color="teal" text-color="white" :src-type="obj.srcType" :src="obj.src"
    :iconName="obj.icon" :placeholder-type="obj.placeholderType" :iconPlaceholder="obj.icon2" :text="obj.text" @emitSize="emitSize">
    <template v-slot:hover>
      <div style="cursor: pointer; color: red; bottom: 0; position: absolute;">
        125
      </div>
    </template>
    <!-- <q-icon name="home"></q-icon> -->
  </t-avatar>
  <br>
  <h3>官方demo：</h3>
  <div class="q-pa-md q-gutter-sm">
    <t-avatar color="red" text-color="white" icon="directions" />

    ---------
    <t-avatar color="primary" text-color="white">J</t-avatar>
    <t-avatar size="100px" font-size="52px" color="teal" text-color="white" icon="directions" />
    <t-avatar size="24px" color="orange">J</t-avatar>
    <t-avatar>
      <img src="https://cdn.quasar.dev/img/avatar.png" />
    </t-avatar>
  </div>
  <div>
    在icon - icon
    <t-avatar size="100px" font-size="52px" color="teal" text-color="white" icon="directions" />
    在slot - icon
    <t-avatar size="100px" font-size="52px" color="teal" text-color="white">
      <q-icon name="directions" />
    </t-avatar>

    在icon - img
    <t-avatar size="100px" font-size="52px" color="teal" text-color="white"
      icon="img:https://cdn.quasar.dev/img/avatar.png" />
    在slot - img
    <t-avatar size="100px" font-size="52px" color="teal" text-color="white">
      <img src="https://cdn.quasar.dev/img/avatar.png" />
    </t-avatar>


    在icon - J
    <t-avatar size="100px" font-size="52px" color="teal" text-color="white" icon="J" />
    在slot - J
    <t-avatar size="100px" font-size="52px" color="teal" text-color="white">
      J
    </t-avatar>
    传参 - JJ
    <t-avatar size="100px" font-size="52px" color="teal" text-color="white" text="JJ">
    </t-avatar>
  </div>
</template>
